<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="300px">
        <el-menu active-text-color="#ffd04b" background-color="#545c64" class="el-menu-vertical-demo"
          :default-active="$route.path" text-color="#fff" @open="handleOpen" @close="handleClose" router>
          <el-sub-menu index="/home">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>组合式API:CompositionAPI</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/home/setup">setup</el-menu-item>
              <el-menu-item index="/home/ref">ref</el-menu-item>
              <el-menu-item index="/home/reactive">reactive</el-menu-item>
              <el-menu-item index="/home/refandreactive">ref和reactive的区别</el-menu-item>
              <el-menu-item index="/home/computed">computed</el-menu-item>
              <el-menu-item index="/home/watch">watch</el-menu-item>
              <el-menu-item index="/home/lifecycle">生命周期</el-menu-item>
              <el-menu-item index="/home/father">父子传参</el-menu-item>
              <el-menu-item index="/home/refdom">refdom</el-menu-item>
              <el-menu-item index="/home/toRefs">toRefs</el-menu-item>
              <el-menu-item index="/home/hook">hook混入</el-menu-item>

            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="/other">
            <template #title>
              <el-icon>
                <location />
              </el-icon>
              <span>CompositionOther 其他API</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/other/shallow">01shallowRef和shallowReactive</el-menu-item>
              <el-menu-item index="/other/readonly">02readonly和shallowReadonly</el-menu-item>
              <el-menu-item index="/other/raw">03toRaw和markRaw</el-menu-item>
              <el-menu-item index="/other/toRef">04toRef</el-menu-item>
              <el-menu-item index="/other/customRef">05customRef</el-menu-item>
              <el-menu-item index="/other/judg">06响应式的判断</el-menu-item>
              <el-menu-item index="/other/provideandinject">07provideAndinject</el-menu-item>
              <el-menu-item index="/other/pinia">08pinia</el-menu-item>
              <el-menu-item index="/other/fragment">09fragment</el-menu-item>
              <el-menu-item index="/other/teleport">10teleport</el-menu-item>
              <el-menu-item index="/other/jump">11路由跳转</el-menu-item>
            </el-menu-item-group>

          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <!-- 加上路由出口 -->
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </div>
</template>
<script setup lang="ts">
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting,
} from '@element-plus/icons-vue'

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="scss" scoped>
/*
  下载scss
    npm i sass
    npm i sass-loader
*/
// v-deep(vue3) 和 ::v-deep(vue2)作用一样
:deep(.el-aside) {
  height: 100vh !important;
  background-color: #545c64;
}

:deep(.el-menu) {
  border: none !important;
}
</style>
